<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入less样式文件 -->
    <link rel="stylesheet/less" href="./css/style.less">
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <!-- 引入wow.js样式文件 -->
    <link rel="stylesheet" href="./css/wow.css">
    <title>Document</title>
</head>

<body>
    <!-- 导航 -->
    <div id="top"></div>
    <div class="header navbar-fixed-top">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand wow fadeInLeft" href="#">Spirit8</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right wow fadeInDown">
                                <li class="active"><a href="#">HOME</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">SERVICES</a></li>
                                <li><a href="#">portfolio</a></li>
                                <li><a href="#">testimonials</a></li>
                                <li><a href="#">CONTACT</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <!-- 背景 -->
    <div class="banner">
        <div class="banner-top wow fadeInDownBig">
            <p>wELCOME on </p>
            <p>spirit8</p>
        </div>
        <div class="banner-center wow fadeInUpBig">
            <p>We are a digital agency with years of experience and with extraordinary people</p>
        </div>
        <a href="#box">
            <div class="banner-bottom">↓</div>
        </a>
    </div>


    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <div class="row">
                <!-- 左边 -->
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="main-img wow bounceInLeft">
                        <img src="./img/33-spirit8-digital-agency_03.png" alt="">
                    </div>
                </div>
                <!-- 右边 -->
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="main-right">
                        <div class="main-title wow fadeInDown">
                            <p>About us</p>
                        </div>

                        <div class="main-font wow fadeInDown">
                            <span>Some</span>
                            <span>words</span>
                            <span>about us</span>
                        </div>

                        <div class="main-center wow fadeInDown">
                            <p>We love building and rebuilding brands through our </p>
                            <p>specific skills. Using colour, fonts, and illustration, we </p>
                            <p>brand companies in a way they will never forget.</p>
                        </div>

                        <div class="main-list wow fadeInDown">
                            <ul>
                                <li>Mission - We deliver uniqueness and quality</li>
                                <li>Skills - Delivering fast and excellent results</li>
                                <li>Clients - Satisfied clients thanks to our experience</li>
                            </ul>
                        </div>

                        <!-- 按钮 -->
                        <div class="main-btn wow fadeInUp">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span>BROWSE OUR WOEK</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- meet our team -->
    <div class="meet">
        <div class="meet-title wow fadeInDown">
            <p>meet our team</p>
        </div>
        <div class="wow fadeInUp">
            <img src="./img/33-spirit8-digital-agency_04.png" class="center-block" alt="">
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="meet-box wow fadeInLeft" data-wow-delay="100ms">
                        <div class="head-sculpture">
                            <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                        </div>
                        <div class="meet-font">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="meet-tab">
                            <p>Do not seek to change what has come</p>
                            <p>before. Seek to create that which has</p>
                            <p>not.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="meet-box wow fadeInLeft" data-wow-delay="200ms">
                        <div class="head-sculpture">
                            <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                        </div>
                        <div class="meet-font">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="meet-tab">
                            <p>Do not seek to change what has come</p>
                            <p>before. Seek to create that which has</p>
                            <p>not.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="meet-box wow fadeInRight" data-wow-delay="100ms">
                        <div class="head-sculpture">
                            <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                        </div>
                        <div class="meet-font">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="meet-tab">
                            <p>Do not seek to change what has come</p>
                            <p>before. Seek to create that which has</p>
                            <p>not.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="meet-box wow fadeInRight" data-wow-delay="200ms">
                        <div class="head-sculpture">
                            <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                        </div>
                        <div class="meet-font">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="meet-tab">
                            <p>Do not seek to change what has come</p>
                            <p>before. Seek to create that which has</p>
                            <p>not.</p>
                        </div>
                    </div>
                </div>


            </div>
        </div>

        <!-- 分页 -->
        <div class="meet-paging">
            <ul>
                <li class="wow fadeInDown" data-wow-delay="100ms"></li>
                <li class="wow fadeInDown" data-wow-delay="200ms"></li>
                <li class="wow fadeInDown" data-wow-delay="300ms"></li>
            </ul>
        </div>
    </div>

    <!-- Meet our team -->
    <div class="subpage">
        <div class="subpage-title wow fadeInDown">
            <p>take a look at our services</p>
        </div>

        <div class="wow fadeInDown">
            <img src="./img/1.png" class="center-block" alt="">
        </div>

        <div class="subpage-font wow fadeInDown">
            <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a trea-</p>
            <p>tise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>

        <div class="container">
            <div class="row">
                <div class="subpage-box">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="wow fadeInDown" data-wow-delay="100ms">
                            <div class="subpage-img">
                                <img src="./img/2.gif" class="center-block" alt="">
                            </div>

                            <div class="subpage-top">
                                <p>Web design</p>
                            </div>

                            <div class="subpage-list">
                                <p>The first line of Lorem Ipsum, "Lorem </p>
                                <p>ipsum dolor sit amet..", comes from a</p>
                                <p>line in section 1.10.32.</p>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div>
                            <div class="wow fadeInDown" data-wow-delay="300ms">
                                <div class="subpage-img">
                                    <img src="./img/3.gif" class="center-block" alt="">
                                </div>

                                <div class="subpage-top">
                                    <p>Web design</p>
                                </div>

                                <div class="subpage-list">
                                    <p>The first line of Lorem Ipsum, "Lorem </p>
                                    <p>ipsum dolor sit amet..", comes from a</p>
                                    <p>line in section 1.10.32.</p>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div>
                            <div class="wow fadeInDown" data-wow-delay="500ms">
                                <div class="subpage-img">
                                    <img src="./img/4.gif" class="center-block" alt="">
                                </div>

                                <div class="subpage-top">
                                    <p>Web design</p>
                                </div>

                                <div class="subpage-list">
                                    <p>The first line of Lorem Ipsum, "Lorem </p>
                                    <p>ipsum dolor sit amet..", comes from a</p>
                                    <p>line in section 1.10.32.</p>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div>
                            <div class="wow fadeInDown" data-wow-delay="700ms">
                                <div class="subpage-img">
                                    <img src="./img/5.png" class="center-block" alt="">
                                </div>

                                <div class="subpage-top">
                                    <p>Web design</p>
                                </div>

                                <div class="subpage-list">
                                    <p>The first line of Lorem Ipsum, "Lorem </p>
                                    <p>ipsum dolor sit amet..", comes from a</p>
                                    <p>line in section 1.10.32.</p>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- SOME OF OUR CLIENTS -->
    <div class="column">
        <div class="column-title wow fadeInDown">
            <p>SOME OF OUR CLIENTS</p>
        </div>

        <div class="wow fadeInUp">
            <img src="./img/33-spirit8-digital-agency_04.png" class="center-block" alt="">
        </div>

        <div class="column-img wow fadeInDown">
            <img src="./img/AAA.png" class="center-block" alt="">
        </div>

        <!-- 分页 -->
        <div class="column-paging">
            <ul>
                <li class="wow fadeInDown" data-wow-delay="100ms"></li>
                <li class="wow fadeInDown" data-wow-delay="200ms"></li>
                <li class="wow fadeInDown" data-wow-delay="300ms"></li>
            </ul>
        </div>
    </div>

    <!-- take a look at our work -->
    <div class="mainnav">
        <div class="mainnav-title">
            <p>take a look at our work</p>
        </div>

        <div>
            <img src="./img/1.png" class="center-block" alt="">
        </div>

        <div class="mainnav-font">
            <!-- <p>fsdgsdghsdgsdgndskngksldbgjsdbjgkdsb</p> -->
        </div>

        <div class="container">
            <div class="row">
                <div class="mainnav-nav">
                    <div class="mainnav-left">
                        <span>FILTER BY TYPE</span>
                    </div>

                    <div class="mainnav-right">
                        <span>All</span>
                        <span>Web ddesign</span>
                        <span>Mobile design</span>
                        <span>Photograpy</span>
                    </div>
                </div>
                <div class="mainnav-box">
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>

                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-sm-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
            
                    <div class="col-lg-3 col-xs-6 col-md-3">
                        <div class="mainnav-img">
                            <img src="./img/dsfgsdgdsgsd.png" class="center-block" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

    </div>




    <!-- 返回顶部 -->
    <a href="#top " id="box ">
        <div class="top-img ">
            <img src="./img/huojian.png " class="wow rubberBand " alt=" ">
        </div>
    </a>

    <!-- 底部 -->
    <div class="footer"></div>


</body>
<!-- 引入less的JavaScript文件 -->
<script src="./js/less.js "></script>
<!-- 引入jq文件 -->
<script src="./js/jquery.js "></script>
<!-- 引入bootstrap JavaScript文件 -->
<script src="./js/bootstrap.js "></script>
<!-- 引入wow.js文件 -->
<script src="./js/wow.js "></script>
<!-- 引入wow.js循环播放文件 -->
<script src="./js/loop.js "></script>


<script>
    // 初始化
    new WOW().init();
</script>

</html>